import React from "react";
import { inject, observer } from "mobx-react";

@inject("apple")
@observer
class AppleItem extends React.Component {
  constructor() {
    super();
  }

  componentDidMount() {}

  render() {
    const {
      appleList,
      currentApples,
      alreadyAppleListData,
      addApple,
      eatApple,
    } = this.props.apple;
    console.log(this.props);
    return (
      <div className="appleBusket">
        <div className="title">苹果篮子</div>

        <div className="stats">
          <div className="section">
            <div className="head">当前</div>
            <div className="content">
              {currentApples.number}个苹果，{currentApples.weight}克
            </div>
          </div>
          <div className="section">
            <div className="head">已吃掉</div>
            <div className="content">
              {alreadyAppleListData.number}个苹果，{alreadyAppleListData.weight}
              克
            </div>
          </div>
        </div>

        <div className="appleList">
          {appleList.map((apple) => {
            return (
              <div className="appleItem" key={apple.number}>
                <div className="apple">
                  <img src={require("../images/apple.png")} alt="" />
                </div>

                <div className="info" key={apple.number}>
                  <div className="name">红苹果 - {apple.number}号</div>
                  <div className="weight">{apple.weight}克</div>
                </div>

                <div className="btn-div">
                  <button onClick={() => eatApple(apple.number)}> 吃掉 </button>
                </div>
              </div>
            );
          })}
        </div>

        <div className="btn-div">
          <button onClick={() => addApple()}>采摘</button>
        </div>
      </div>
    );
  }
}

export default AppleItem;
